<template>
  <div>
    <el-card>
      <!--    面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
        <el-breadcrumb-item>操作员管理</el-breadcrumb-item>
        <el-breadcrumb-item>操作员列表</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <!--    表格-->
      <el-table :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)" border>
        <el-table-column fixed prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="操作员" width="100"></el-table-column>
        <el-table-column prop="newOrder" label="新订情况" width="150"></el-table-column>
        <el-table-column prop="exitOrder" label="退订情况" width="200"></el-table-column>
        <el-table-column prop="exitCommodity" label="退货情况" width="100"></el-table-column>
        <el-table-column prop="changeOrder" label="换货情况" width="300"></el-table-column>
        <el-table-column prop="money" label="净收入" width="300"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
          <router-link :to="{ path: '/managerview' }">
            <el-button type="primary" size="small" @click="selectview(scope.row)">查看</el-button>
          </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.curPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
        </el-pagination>
    </el-card>
  </div>
</template>

<script>
    export default {
        data(){
            return{
                inputid:'',
                options:[{
                    value:'0',
                    lable:'用户id'
                },{
                    lable: '用户名称',
                    value:'1'
                }],
                // 表格数据
                tableData: [],
                //分页
                pageInfo: {
                    query:'',
                    curPage:1,
                    pagesize:5
                },
                total:0,
                //获取所有管理员的id和名字
                alluser:[]
            }
        },
        methods:{
          //获取操作过数据的操作员
          async getList(){
            const{data:res}=await this.$http
            .get('/api/operator/query_all_sysUser')
            .catch(err=>{
              this.$message.error('服务器异常或权限不够！')
              console.log(err.message)
            })
            this.tableData=res.data
            this.getAllmanager()
          },
          //获取所有操作员
          async getAllmanager(){
            // console.log(this.tableData);
            // var index=0
            const{data:res}=await this.$http
            .get('/api/user/getUser')
            .catch(err=>{
              this.$message.error('服务器异常或权限不够！')
              console.log(err.msg)
            })
            if(res.code===200){
              this.alluser=res.data
              this.total=res.data.length
              this.countoperation()
              this.$forceUpdate()
            }
          },
             // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageInfo.pagesize=val

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageInfo.curPage=val
            },
            //查看详情
            selectview(row){
              // this.countoperation()
              window.sessionStorage.setItem('managerid',row.id)
              window.sessionStorage.setItem('managername',row.name)
            },
            //统计所有操作员数据
            countoperation(){
              var request=[]
              // var index=0
              this.alluser.forEach(item=>{
                request.push({
                  id:item.id,
                  name:item.username,
                  newOrder:0,
                  exitOrder:0,
                  exitCommodity:0,
                  changeOrder:0,
                  money:0
                })
              })
              if(this.tableData!==[]){
                request.forEach(item1=>{
                this.tableData.forEach(item2=>{
                  if(item1.name===item2.name){
                    item1.newOrder=item2.newOrder
                    item1.exitOrder=item2.exitOrder
                    item1.exitCommodity=item2.exitCommodity
                    item1.changeOrder=item2.changeOrder
                    item1.money=item2.money
                  }
                })
              })
              }
              this.tableData=request
            }
        },
        created(){
          this.getList()
          this.getAllmanager()
        }
    }
</script>
